<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增</title>
    <link rel="stylesheet" th:href="@{/adminStatic/layui/css/layui.css}">
    <script th:src="@{/webjars/layui/2.5.6/layui.js}" src="" type="text/javascript"></script>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}" src="" type="text/javascript"></script>
    <script type="text/javascript" src="../../js/xadmin.js" th:src="@{/adminStatic/js/MyLayuiUtils.js}"></script>
    <style>
        html {
            height: 100%;
        }

        .layui-form-pane .layui-form-text .layui-textarea {
            min-height: 80px;
            max-height: 80px;
        }

        .div_show {
            transform: translate(-2000px);
            transition: all 0.8s;
        }

        .div_hide {
            transform: translate(2000px);
            transition: all 1.5s;
        }

        .photo-viewer {
            margin: 50px 0;
            text-align: center;
        }

        .img-reveal {
            display: inline-block;
            margin: 0px 8px;
        }

        .layui-btn {
            height: 34px;
            line-height: 34px;
        }
        .layui-form-select dl {
            max-height: 195px;
        }
    </style>
</head>
<body style="height: 100%;padding: 15px;box-sizing: border-box">

<!--表单-->
<form class="layui-form layui-form-pane form-info addForm" action="" th:add-url="${addUrl}">
    <div id="product_info" style="width:100%">
        <!-- 车位类型 -->
        <div class="layui-form-item">
            <label class="layui-form-label">住户姓名</label>
            <div class="layui-input-inline" lay-verify="required" >
                <input class="layui-input" autocomplete="off" placeholder="请填写业主名 (必填)"
                       name="userName">
            </div>
        </div>
        <!-- 联系电话 -->
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="required" placeholder="请填写联系电话 (必填)" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="required" placeholder="请写邮箱, 用来通知物业账单 (必填)" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" name="cardNum" lay-verify="required" placeholder="请填写身份证号 (选填)" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">健康码</label>
            <div class="layui-input-inline">
                <select name="healthFlag">
                    <option value="绿">绿</option>
                    <option value="黄">黄</option>
                    <option value="红">红</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">疫苗情况</label>
            <div class="layui-input-inline">
                <select name="vaccines">
                    <option value="未接种">未接种</option>
                    <option value="二针">二针</option>
                    <option value="三针">三针</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否隔离</label>
            <div class="layui-input-inline">
                <select name="quarantineFlag">
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">行程码</label>
            <div class="layui-input-inline">
                <input type="text" name="trip" lay-verify="required" placeholder="请填写行程码, 多个城市逗号隔开" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    
    <div class="content-input" style="position: absolute; left: 15px; bottom: 15px;">
        <input type="button" value="提交" name="submit" class="layui-btn addBtn layui-btn-normal">
        <input type="reset" class="layui-btn layui-btn-normal" value="清空">
    </div>
</form>


<script>
    layui.use(['form', 'upload', 'laydate'], function () {
        var layer = layui.layer;

        var lock = true;

        /**
         * 绑定回车事件
         */
        $(document).keypress(function (e) {
            //如果当前有类似layer.alert的窗体，点击最上层的确定按钮，并且取消所有焦点
            if ($('.layui-layer-btn0').length > 0) {
                $('.layui-layer-btn0').eq($('.layui-layer-btn0').length - 1)[0].click();
                $("*").blur();
            }
        });

        /**
         * 单击提交事件
         */
        $(".addBtn").click(function () {
            if (lock) {      //判断是否重复提交
                lock = true;
                //验证数据
                var flag = isVerifyDate();
                // 如果flag不为空就是验证不通过
                if(flag) {
                    layer.confirm(flag, {
                        btn: ['确定']  //按钮
                        , icon: 5
                        , anim: 6
                    });
                    return;
                }
                //获取表单数据
                var addData = $(".addForm").serializeArray();
                //获取提交的url
                var url = $(".addForm").attr("add-url");
                // 将数据转换为对象, 注意发送时将对象转为JSON字符串
                var jsonObj={};
                $(addData).each(function(){
                    jsonObj[this.name]=this.value;
                });
                console.log(jsonObj)
                $.ajax({
                    url: url,
                    type: 'POST',
                    async: false,
                    contentType : 'application/json;charset=utf-8', //设置请求头信息
                    data: JSON.stringify(jsonObj),
                    success: function(rollData) {
                        if (rollData.code == "0") {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 6
                            }, function () {
                                window.parent.location.reload();    //刷新父页面
                            });
                        } else {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 5
                                , anim: 6
                            }, function (index) {
                                lock = true;
                                layer.close(index);
                            });
                        }
                    },
                    error: function(res) {
                        layer.confirm('啊哦！访问出问题了！快找开发狗算账！', {
                            btn: ['确定']  //按钮
                            , icon: 5
                            , anim: 6
                        }, function (index) {
                            lock = true;
                            layer.close(index);
                        });
                    }
                })
            }
        });

        /**
         * 验证数据方法
         */
        function isVerifyDate() {
            // 获取所有数据
            var userName = $("input[name='userName']").val();
            var phone = $("input[name='phone']").val();
            var trip = $("input[name='trip']").val();
            var cardNum = $("input[name='cardNum']:checked").val();
            // 非空验证
            if(!userName || !phone || !trip) {
                return "请认真点, 将所有必填数据填写完整! ";
            }
            // 正则判断手机号
            if(checkPhone(phone)) {
                return "请填写正确手机号";
            }
            // 身份证可以不输入， 如果输入进行验证
            if(cardNum && checkID(cardNum)) {
                return "请填写正确身份证号";
            }
        }
    });
</script>
</body>
</html>